<template>
    <div  class="sp">
      <div class="qgs"  
      v-for="(ele,i) in tabs" :key="i">
        <div class="qgsp">
            <div class="qgsp-zuo">
                <img src="../../src/picture/9012510.jpg_220x240.jpg" alt="">



            </div>
            <div class="qgsp-you">
                <div class="Name">
                    <p class="name-1">小菊(配色)</p>
                    <p class="name-2">C级</p>
                </div>
                <div class="lb">
                    <p class="lb-1">诚</p>
                    <p class="lb-2"><van-icon name="good-job" /></p>
                    <p class="lb-3">98.8%</p>
                    <p class="lb-4">海培花卉</p>


                </div>
                <div class="yq">
                  <div class="jdt">
                    <van-progress :percentage="75" 
                     stroke-width="12"
                     pivot-text="已抢75%"
                     track-color="rgb(222,222,222)"
                     color="rgb(249,158,5)"
                    />

                  </div>
                      
                  
                    <p class="jtd-wz">已抢1493扎</p>

                </div>

                <div class="tj">
                    <div class="tj-zuo">
                        <p class="tj-wen">限时特价:</p>
                        <p class="tj-jg">4.9</p>
                        <p class="tj-wen tj-wen1">/扎</p>

                    </div>
                    <div class="tj-you">
                        <p>
                            立即抢
                        </p>

                    </div>


                </div>
              

            </div>


        </div>

      </div>
    
    </div>
</template>

<script>

export default {
   
    data() {
        return {
            tabs: [
        {
          til: "全部",
          tab: "all",
        },
        {
          til: "精华",
          tab: "good",
        },
        {
          til: "分享",
          tab: "share",
        },
        {
          til: "问答",
          tab: "ask",
        },
        {
          til: "招聘",
          tab: "job",
        },
        {
          til: "测试",
          tab: "dev",
        },
      ],

            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped>
    .sp{
        width: 100%;
       
        margin-top: 0px;
 
        border-radius: 0px;
    }
    .sp .qgs{
        width: 90%;
       
        height: 150px;
        margin: 0 auto;
        border-bottom: 1px solid rgb(244, 244, 244);
    }

    .sp .qgs .qgsp{
        width: 100%;
        margin: 0 auto;
        height: 140px;
        margin-top: 10px;
        background: #fff;
        border-radius: 0px;
       
    }
    .sp .qgs .qgsp .qgsp-zuo{
        width: 40%;
        height: 140px;
        float: left;

    }
    .sp .qgs .qgsp .qgsp-zuo img{
        width: 100%;
        height: 140px;
    }
    .sp .qgs .qgsp .qgsp-you{
        width: 60%;
        height: 140px;
        float: right;

    }
    .sp .qgs .qgsp .qgsp-you .Name{
        display: flex;
       padding-left: 10px;
    }
    .sp .qgs .qgsp .qgsp-you .Name .name-1{
        font-size: 18px;
    }
    .sp .qgs .qgsp .qgsp-you .Name .name-2{
        font-size: 18px;
        padding-left: 4px;
        color: greenyellow;
    }
    .sp .qgs .qgsp .qgsp-you .lb{
        display: flex;
        padding-left: 10px;
        padding-top: 10px;
    }
    .sp .qgs .qgsp .qgsp-you .lb .lb-1{
        height: 20px;
        width: 20px;
        background: red;
        color: #fff;
        line-height: 20px;
        text-align: center;
        border-radius: 3px;

    }
    .sp .qgs .qgsp .qgsp-you .lb .lb-2{
        color: rgb(249, 113, 1);
        font-size: 22px;
        margin-top: -2px;
        margin-left: 2px;

    }
    .sp .qgs .qgsp .qgsp-you .lb .lb-3{
          background: rgb(243, 245, 242);
          width: 60px;
          height: 20px;
          margin-left: -8px;
          line-height: 20px;
          color: rgb(249, 113, 1);
    }
    .sp .qgs .qgsp .qgsp-you .lb .lb-4{
        line-height: 20px;
        padding-left: 10px;
        font-weight: 600;

    }
 .sp .qgs .qgsp .qgsp-you .yq{
      
        padding-left: 10px;
        padding-top: 10px;
    }
    .sp .qgs .qgsp .qgsp-you .yq .jdt{
        width: 110px;
        float: left;
    }
    ::v-deep .van-progress{
        position: relative;
        border-radius: 15px;

    }
    ::v-deep .van-progress__pivot{
        height: 10px;
        line-height: 12px;
        position: absolute;
        top: 5px;
        left: 0px !important;
        font-size: 12px;
    }
    .sp .qgs .qgsp .qgsp-you .yq .jtd-wz{
        font-size: 12px;
        line-height: 12px;
        padding-left: 10px;
    }
 .sp .qgs .qgsp .qgsp-you .tj{
    padding-left: 10px;
    padding-top: 20px;
    
 }
 .sp .qgs .qgsp .qgsp-you .tj .tj-zuo{
    display: flex;
    color: red;
    float: left;
 }
 .sp .qgs .qgsp .qgsp-you .tj .tj-zuo .tj-wen{
    font-size: 15px;
    line-height: 25px;
 }
 .sp .qgs .qgsp .qgsp-you .tj .tj-zuo .tj-jg{
    font-size: 18px;
    padding-top: 2px;
 }
 .sp .qgs .qgsp .qgsp-you .tj .tj-zuo .tj-wen1{
    padding-top: 3px;
 }
 .sp .qgs .qgsp .qgsp-you .tj .tj-you{
    float: right;
  
 }
 .sp .qgs .qgsp .qgsp-you .tj .tj-you p{
   line-height: 25px;
   height: 25px;
   width: 60px;
   background: red;
   font-family: "Times New Roman", Times, serif;
   color: #fff;
   border-radius: 25px;
   margin-right: 5px;
 }



   

    



</style>